<template>
  <ul class="guest-data" id="message-list">
    <li class="clearfix" v-for="(item, index) in messages">
      <div class="avatar">
        <img src="http://placehold.it/50x50" alt="">
      </div>
      <div class="data">
        <div class="name">{{item.uname}}</div>
        <div>{{item.content}}</div>
        <div class="time">{{item.time}}</div>
      </div>
      <div class="operate">
        <a href="javascript:;" @click="deleteMsg(index)">删除</a>
        <a href="javascript:;" @click="editMsg(index)">修改</a>
      </div>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      messages: {
        type: Array
      }
    },
    data() {
      return {}
    },
    methods: {
      deleteMsg(index) {
        this.$emit('deleteUp', index);
      },
      editMsg(index) {
        this.$emit('editUp', index);
      }
    }
  };
</script>